import { createTheme } from '@vanilla-extract/css'
import { vars } from './theme-contract.css'

export const lightThemeClass = createTheme(vars, {
  colors: {
    red120: '#cc5757',
    red100: '#ff6d6d',
    red80: '#ff8a8a',
    red60: '#ffa7a7',
    red40: '#ffc5c5',
    red20: '#ffe2e2',
    steel120: '#2b2b37',
    steel100: '#363645',
    steel80: '#5e5e6a',
    steel60: '#86868f',
    steel40: '#afafb5',
    steel20: '#d7d7da',
    white: 'rgba(250,250,250,1)',
    white80: 'rgba(250,250,250,0.8)',
    white0: 'rgba(250,250,250,0)',
    black: '#1B1A22',
    blue: '#569AFF',
    green: '#88DFAB',
    codeBackground: '#f0f2f4',
    'red-outline': '#ffc5c5',
    redYellowGradient100: 'linear-gradient(330deg, #fff59a 20%, #ff6d6d 100%)',
    redYellowGradient40:
      'linear-gradient(330deg, #fff59a66 20%, #ff6d6d66 100%)',
    blueGreenGradient100:
      'linear-gradient(150deg, #569AFF 10.21%, #88DFAB 84.57%)',
    blueGreenGradient40:
      'linear-gradient(150deg, #569AFF66 10.21%, #88DFAB66 84.57%)',
  },
  shadows: {
    'red-outline': '#ffc5c5',
  },
  space: {
    '5': '0.5rem',
    '10': '1rem',
    '15': '1.5rem',
    '20': '2rem',
    '25': '2.5rem',
    '30': '3rem',
    '35': '3.5rem',
    '40': '4rem',
    '45': '4.5rem',
    '50': '5rem',
    '60': '6rem',
    '80': '8rem',
    '100': '10rem',
    '110': '11rem',
  },
  sizes: {
    splash: '40rem',
    type: '80rem',
    document: '120rem',
    largeDoc: '1600px',
  },
  radii: {
    r4: '0.4rem',
    r8: '0.8rem',
    r20: '2rem',
    round: '50%',
  },
  zIndices: {
    1: '100',
    '1.5': '150',
    2: '200',
    3: '300',
    4: '400',
    max: '999',
  },
  fonts: {
    sans: 'Inter, -apple-system, system-ui, sans-serif',
    'sans-var': '"Inter var", -apple-system, system-ui, sans-serif',
    mono: '"Space Mono", monospace',
  },
  fontWeights: {
    default: '400',
    bold: '600',
    semiblack: '700',
  },
  fontSizes: {
    XXL: '4.8rem',
    XL: '4rem',
    L: '3.2rem',
    M: '2.6rem',
    S: '2rem',
    XS: '1.6rem',
    XXS: '1.4rem',
    code: '1.4rem',
  },
  lineHeights: {
    XXL: '5.8rem',
    XL: '5rem',
    L: '4.2rem',
    M: '3.6rem',
    S: '3rem',
    XS: '2.6rem',
    XXS: '180%',
    code: '1.8rem',
  },
})
